<template>
  <div id="Jobtimereport_container" style="height: 98%">
    <el-card style="background: #efefef">
      <el-row :gutter="20" class="row1">
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <div class="leftTop">仕分け管理</div>

            <el-row class="leftSec">
              <el-col :span="12">
                <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" style="border: 0">
                  <el-menu-item index="1" @click="getJobtimereportItem(0)">
                    <span slot="title"
                      >全部日報<span>({{ counts.all }})</span></span
                    >
                  </el-menu-item>

                  <el-menu-item index="2" @click="getJobtimereportItem(1)">
                    <span slot="title"
                      >日報<span>({{ counts.ribao }})</span></span
                    >
                  </el-menu-item>

                  <el-menu-item index="3" @click="getJobtimereportItem(2)">
                    <span slot="title"
                      >週報<span>({{ counts.zhoubao }})</span></span
                    >
                  </el-menu-item>

                  <el-menu-item index="4" @click="getJobtimereportItem(3)">
                    <span slot="title"
                      >月報<span>({{ counts.yuebao }})</span></span
                    >
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="5">
          <div class="grid-content bg-purple">
            <div class="midTop">
              <el-button type="primary" icon="el-icon-plus" @click="insertworknotes">クリエート </el-button>
            </div>
            <div class="midTop">
              <span class="midRekishi">歴史記録</span>
            </div>

            <!-- 添加分隔线 -->
            <div style="height: 10px"></div>
            <hr />

            <div style="text-align: left; padding-left: 5px">
              <el-input placeholder="キーワード" v-model="jobtimereport.searchbean.workCon" style="width: 80%" clearable> </el-input>
            </div>

            <div style="text-align: left; padding-left: 5px; margin-top: 10px">
              <div>
                <el-date-picker
                  style="width: 80%"
                  v-model="jobtimereport.searchbean.createTime"
                  align="right"
                  type="date"
                  placeholder=" "
                  :picker-options="pickerOptions"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                >
                </el-date-picker>
                <span>
                  <el-button icon="el-icon-search" circle style="margin-left: 5px" @click="getJobtimereportItem()"> </el-button>
                </span>
              </div>
            </div>

            <div>
              <div v-for="item of jobtimereportlist" :key="item.value">
                <div class="notesdiv" style="clear: both; border-bottom: 1px solid #cccccc; cursor: pointer" @click="showworknotes(item.workNotesGuid)">
                  <div style="margin: 10px">
                    <span style="font-size: 14px; color: #000000; margin-bottom: 10px">{{ item.workTile }}</span>
                  </div>
                  <div style="margin: 10px">
                    <span style="font-size: 12px; color: #c0c0c0">{{ item.createTime.toString().substr(0, 10) }}</span
                    >&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="font-size: 12px; color: #c0c0c0">{{ item.workCon.length > 10 ? item.workCon.substr(0, 10) + '...' : item.workCon }} </span>
                  </div>
                </div>
              </div>

              <div v-if="jobtimereportlist == undefined || jobtimereportlist == null || jobtimereportlist.length <= 0">
                <div style="margin-top: 20px; text-align: center">データ無し</div>
              </div>

              <div v-if="jobtimereportlist.length > 0" class="pageSet">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="jobtimereport.indexPage"
                  :page-size="jobtimereport.pageSize"
                  layout="prev, next"
                  :total="total"
                >
                </el-pagination>
              </div>
            </div>

            <!-- <div id="worknotesdiv" style="overflow-y: auto;"></div> -->
          </div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content bg-purple">
            <router-view :id="id" @updataNode="getNodeData"></router-view>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      //获取工作日报数量
      counts: {
        all: 0,
        ribao: 0,
        zhoubao: 0,
        yuebao: 0
      },
      id: '',
      // 獲取工作日报信息
      jobtimereport: {
        indexPage: 1,
        pageSize: 6,
        searchbean: {
          userinfoGuid: this.$store.getters.showuserGuid,
          createTime: '',
          workCon: '',
          workTypeGuid: ''
        }
      },
      // 獲取過來的工作日报數組
      jobtimereportlist: [],
      total: 0,
      input: '',
      input1: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      value2: '',
      count: 0,
      dailyList: []
    }
  },
  // 頁面初加載
  created() {
    this.getAllNumbers()
  },
  methods: {
    getNodeData() {
      this.getAllNumbers()
      this.getJobtimereportItem()
      this.id = ''
      // this.$router.push('/Showreport')
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.jobtimereport.pageSize = newSize
      this.getJobtimereportItem()
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.jobtimereport.indexPage = newPage
      this.getJobtimereportItem()
    },
    // 分頁查詢數據
    getJobtimereportItem(number) {
      if (number == 0) {
        this.jobtimereport.searchbean.workTypeGuid = ''
      }
      if (number == 1) {
        this.jobtimereport.searchbean.workTypeGuid = '4db5e5718ad9445c8193921e75351377'
      }
      if (number == 2) {
        this.jobtimereport.searchbean.workTypeGuid = '079817ef717346c58e615f00e272f9d3'
      }
      if (number == 3) {
        this.jobtimereport.searchbean.workTypeGuid = 'fa1d5ac800f543a9b4768f9bf9887d9d'
      }
      this.axios
        .post('/worknotes/select/list', this.jobtimereport)
        .then((res) => {
          this.jobtimereportlist = res.data.data.list
          console.log(this.jobtimereportlist)
          this.total = res.data.data.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    //工作笔记数量
    getAllNumbers() {
      console.log(this.jobtimereport.searchbean)
      this.axios
        .post('/worknotes/number', this.jobtimereport.searchbean)
        .then((res) => {
          this.getJobtimereportItem()
          let shuzu = res.data.data
          console.log(shuzu)
          this.counts.ribao = 0
          this.counts.zhoubao = 0
          this.counts.yuebao = 0
          for (let i = 0; i < shuzu.length; i++) {
            if (shuzu[i].workTypeName === '日報') {
              this.counts.ribao = shuzu[i].number
            }
            if (shuzu[i].workTypeName === '週報') {
              this.counts.zhoubao = shuzu[i].number
            }
            if (shuzu[i].workTypeName === '月報') {
              this.counts.yuebao = shuzu[i].number
            }
          }
          this.counts.all = this.counts.ribao + this.counts.zhoubao + this.counts.yuebao
          console.log(this.counts)
        })
        .catch((error) => {
          console.log(error)
        })
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    insertworknotes() {
      this.$router.push('/Addreport')
    },
    showworknotes(id) {
      console.log(this.jobtimereportlist)
      this.id = id
      this.$router.push('/Showreport')
    }
  }
}
</script>

<style scoped>
.pageSet {
  position: absolute;
  bottom: -275px;
  left: 31%;
  transform: translateX(-50%);
}
.grid-content {
  background: white;
  height: 98%;
}
:deep(.row1) {
  height: 510px;
}
#Jobtimereport_container .el-col {
  height: 790px;
}

.leftTop{
  padding-top: 20px;
  font-size: 15px;
  text-align: left;
  padding-left: 30px;
}
.leftSec{
  margin-left: 50px;
  margin-top: 20px;
}
.midTop{
  text-align: left; 
  padding-left: 5px; 
  padding-top: 20px;
}
.midRekishi{
  font-size: 17px; 
  color: #000000; 
  margin-bottom: 10px;
}
</style>
